<template>
  <div class="mine">
    <van-nav-bar title="用户">
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <van-image round width="7rem" height="7rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
    <p>{{nickname}}</p>
    <van-button v-if="userInfo.length!=0" type="danger" size="large" @click="logout">立即退出</van-button>
    <van-button v-else type="primary" size="large" to="/login">请登录</van-button>
    <van-cell title="地址管理" is-link icon="location-o" />
    <van-cell value="收藏管理" icon="star-o" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: [],
      nickname: "请登录"
    };
  },
  created() {
      this.getData();
  },
  methods: {
    getData() {
      if (localStorage.getItem("userInfo")) {
        this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
        this.nickname = JSON.parse(localStorage.getItem("userInfo")).nickname;
      } else {
        this.userInfo = [];
        this.nickname="请登录";
      }
    },
    logout() {
      localStorage.removeItem("userInfo");
      this.$toast.success('退出成功');
      this.getData();
    }
  }
};
</script>
<style>
.mine {
  text-align: center;
}
.mine p {
  margin: 0;
  padding: 0;
}
.mine .van-button--large {
  width: 90%;
  margin: 50px 0 20px;
}
.mine .van-cell__title {
  text-align: left;
}
.mine .van-image--round {
  margin-top: 20px;
}
.mine .van-nav-bar {
  position: fixed;
  width: 100%;
  top: 0;
}
</style>